import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { ChangeDetectionComponent } from './change-detection.component';
import { ChangesDemo1Component } from './changes-demo1/changes-demo1.component';
import { ChangesDemo2Component } from './changes-demo2/changes-demo2.component';
import { ChangesDemo3Component } from './changes-demo3/changes-demo3.component';

const routes: Routes = [
  // Errors: 错误的使用方法;
  // { path: '', component: ChangeDetectionComponent },
  // { path: 'demo1', component: ProfileCardComponent },
  // { path: 'demo2', component: ParentComponent },
  // { path: 'demo3', component: CounterComponent },
  {
    path: 'demos',
    component: ChangeDetectionComponent,
    children: [
      { path: '', redirectTo: 'demo1', pathMatch: 'full' },
      { path: 'demo1', component: ChangesDemo1Component },
      { path: 'demo2', component: ChangesDemo2Component },
      { path: 'demo3', component: ChangesDemo3Component },
    ]
  }
];

@NgModule({
  // 特性模块的路由，使用 RouterModule.forChild()方法
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ChangeDetectionRoutingModule { }
